<!--
 * @Author: huangtianyang 916072572@qq.com
 * @Date: 2024-03-27 17:31:57
 * @LastEditors: huangtianyang
 * @LastEditTime: 2024-05-11 15:36:14
 * @FilePath: \driving-training-admin\src\components\form\uploadVideo.vue
-->
<template>
    <div class="upload-video-popup">
        <BasicDialogVue
            :data="dialog"
            @close="
                () => {
                    dialog.visible = false
                    emit('close')
                }
            "
        >
            <template #content>
                <div class="video-container">
                    <h1>视频文件</h1>
                    <upload
                        fileType="video"
                        :dirType="dirType"
                        :sizeRatio="sizeRatio"
                        v-if="videoData.url === ''"
                        class="upload"
                        @change="
                            res => {
                                videoData.url = res.url
                                videoData.key = res.key
                                videoData.name = res.name
                            }
                        "
                    ></upload>
                    <div
                        class="view view-video"
                        v-else
                        :style="{ width: '480px', height: (480 * sizeRatio[1]) / sizeRatio[0] + 'px' }"
                    >
                        <video :src="videoData.url" controls></video>
                        <div class="upload-operation upload-delete" @click="onDelete('video')">
                            <el-icon :size="24" color="#333">
                                <Delete />
                            </el-icon>
                        </div>
                    </div>
                </div>
                <div class="poster">
                    <h1>视频封面图</h1>
                    <upload
                        fileType="image"
                        :dirType="dirType"
                        :sizeRatio="sizeRatio"
                        v-if="imageData.url === ''"
                        class="upload"
                        @change="
                            res => {
                                imageData.url = res.url
                                imageData.key = res.key
                                imageData.name = res.name
                            }
                        "
                    ></upload>
                    <div
                        class="view view-poster"
                        v-else
                        :style="{ width: '480px', height: (480 * sizeRatio[1]) / sizeRatio[0] + 'px' }"
                    >
                        <img :src="imageData.url" />
                        <div class="upload-operation upload-delete" @click="onDelete('image')">
                            <el-icon :size="24" color="#333">
                                <Delete />
                            </el-icon>
                        </div>
                    </div>
                </div>

                <div style="display: flex; align-items: center; justify-content: center">
                    <el-button type="primary" style="margin: 20px auto" @click="onConfirm">确定</el-button>
                </div>
            </template>
        </BasicDialogVue>
    </div>
</template>

<script setup lang="ts">
import BasicDialogVue from '@/components/baseDialog/Index.vue'
import upload from './upload.vue'
import { reactive, watchEffect, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { fileUrl } from '@/apis/upload'
const props = defineProps(['visible', 'fileType', 'dirType', 'sizeRatio', 'value'])
const emit = defineEmits(['close', 'change'])
const dialog = reactive({
    visible: false,
    title: '视频配置',
    url: '',
    key: ''
})

const videoData = reactive({
    type: 'video',
    url: '',
    key: '',
    name: ''
})
const imageData = reactive({
    type: 'image',
    url: '',
    key: '',
    name: ''
})

watchEffect(() => {
    dialog.visible = props.visible
    if (props.visible && props.value && props.value.list.length) {
        props.value.list.forEach((item: any) => {
            if (item.type === 'video') {
                videoData.key = item.key
                if (!item.url && item.key) {
                    fileUrl(item.key).then(res => {
                        videoData.url = res.data.result
                    })
                } else {
                    videoData.url = item.url
                }
            } else {
                imageData.key = item.key
                if (!item.url && item.key) {
                    fileUrl(item.key).then(res => {
                        imageData.url = res.data.result
                    })
                } else {
                    imageData.url = item.url
                }
            }
        })
    }
})

const onDelete = (type: string) => {
    if (type === 'video') {
        videoData.url = ''
        videoData.key = ''
    } else {
        imageData.url = ''
        imageData.key = ''
    }
    // emit('change', [videoData, imageData])
}
const onConfirm = () => {
    if ((videoData.url === '' && imageData.url === '') || (videoData.url !== '' && imageData.url !== '')) {
        dialog.visible = false
        emit('change', [videoData, imageData])
    } else if (videoData.url === '') {
        ElMessage.error('请上传视频')
    } else if (imageData.url === '') {
        ElMessage.error('请上传图片')
    }
}
</script>

<style scoped lang="scss">
.video-container,
.poster {
    margin-bottom: 10px;

    h1 {
        font-size: 16px;
        font-weight: bold;
        color: #000;
        margin-bottom: 10px;
    }
}
.view {
    width: 100%;
    height: 300px;
    position: relative;
    cursor: pointer;
    &:hover {
        .upload-operation {
            opacity: 1;
        }
    }
    .upload-operation {
        position: absolute;
        top: 10px;
        right: 10px;
        opacity: 0;
    }
    video,
    img {
        width: 100%;
        height: 100%;
    }
}
</style>
